<template>
  <div class="signup" v-if="!getIsPhone">
    <div class="content box-shadow">
      <div class="logo">
        <img :src="logo" alt="">
      </div>
      <div class='form-group'>
        <div class="form-title border-bottom">
          免费注册
        </div>
        <input-item 
          @input="updateInvitingCode"
          :invitingCode="invitingCode"
          :errorMsg="invitingCodeErr"
          :type="'text'" 
          :title="'邀请码'" 
          :placeholder="'点击右侧获取邀请码'"
          ><div class="get-code" @click="getInvitingCode">点击获取邀请码</div>
        </input-item>
        <input-item 
          :errorMsg="errorMsg"
          :type="'text'" 
          :title="'用户名'" 
          :placeholder="'请输入用户名'"
          @input="updateAccountName"
          >
        </input-item>
        <input-item 
          :type="isPasswordVisiable ? 'text' : 'password'" 
          :title="'密码'" 
          :placeholder="'请输入密码'"
          @input="updatePassword"
          >
          <span class="icon-visible" @click="toggleVisibility">
            <i class="iconfont" :class="isPasswordVisiable ? 'iconpwd-visible' : 'iconpwd-hidden'"></i>
          </span>
        </input-item>
      </div>
      <div class="btns">
        <submit-button 
          :name="'已有账号'"
          @click="goLogin"
          >
        </submit-button>
        <submit-button :name="'注册'"
          :buttonState=" isActive ? 'selected' : 'disabled'"
          @click="handleSignup"
        ></submit-button>
      </div>
    </div>
  </div>
  <div class="signup-phone" v-else>
    <login-signup-template>
      <template v-slot:form>
        <div class='form-group'>
          <div class="form-title border-bottom">
            免费注册
          </div>
          <input-item 
            @input="updateInvitingCode"
            :invitingCode="invitingCode"
            :errorMsg="invitingCodeErr"
            :type="'text'" 
            :title="'邀请码'" 
            :placeholder="'点击右侧获取邀请码'"
            ><div class="get-code" @click="getInvitingCode">点击获取邀请码</div>
          </input-item>
          <input-item 
            :errorMsg="errorMsg"
            :type="'text'" 
            :title="'用户名'" 
            :placeholder="'请输入用户名'"
            @input="updateAccountName"
            >
          </input-item>
          <input-item 
            :type="isPasswordVisiable ? 'text' : 'password'" 
            :title="'密码'" 
            :placeholder="'请输入密码'"
            @input="updatePassword"
            >
            <span class="icon-visible" @click="toggleVisibility">
              <i class="iconfont" :class="isPasswordVisiable ? 'iconpwd-visible' : 'iconpwd-hidden'"></i>
            </span>
          </input-item>
        </div>
      </template>
      <template v-slot:submit>
        <submit-button 
          :name="'已有账号'"
          @click="goLogin"
          >
        </submit-button>
        <submit-button :name="'注册'"
          :buttonState=" isActive ? 'selected' : 'disabled'"
          @click="handleSignup"
        ></submit-button>
      </template>
    </login-signup-template>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import LoginSignupTemplate from './components/login-signup-template'
import InputItem from './components/input-item'
import SubmitButton from './components/submit-button'
import LoginBottom from './components/login-bottom'
import logo from "@/assets/imgs/logo.png"
export default {
  components: {
    InputItem,
    SubmitButton,
    LoginBottom,
    LoginSignupTemplate
  },
  data() {
    return {
      logo: logo,
      password: '',
      accountName: '',
      invitingCode: '',
      errorMsg: '',
      invitingCodeErr: '',
      isPasswordVisiable: false
    }
  },
  methods: {
    updatePassword(password) {
      
        this.password = password
      
        this.errorMsg = ''
      
    },
    updateAccountName(accountName) {
      this.accountName = accountName
      this.errorMsg = ''
    },
    updateInvitingCode(invitingCode) {
      this.invitingCodeErr = ''
      this.invitingCode = invitingCode
    },
    getInvitingCode() {
      setTimeout(() => {
        this.invitingCode = 'abcdeda124'
      }, 500)
    },
    goLogin() {
      this.$router.push({path: '/login'})
    },
    handleSignup() {
      let signUpInfo = {
        password: this.password,
        accountName: this.accountName,
        invitingCode: this.invitingCode
      }
      setTimeout(() => {
        this.errorMsg = '用户名已存在'
        this.invitingCodeErr = '邀请码已被注册'
      }, 1000)
    },
    toggleVisibility() {
      this.isPasswordVisiable = !this.isPasswordVisiable
    } 
  },
  computed:{
    ...mapGetters('lottery', ['getIsPhone', 'getUserInfo']),
    isActive() {
      return this.password !== '' && this.accountName !== '' && this.invitingCode !== '' && this.errorMsg == '' 
    }
  },
  watch:{

  }
}
</script>

<style lang="stylus" scoped>
  @import '~@/assets/styles/variables.styl'
  @media screen and (min-width 750px)
    .signup 
      .content
        width 400px  
        position absolute 
        left 50%
        top 50%
        transform translate(-50%, -50%)
        box-sizing border-box 
        padding 20px 
        background $color-text-button
        border-radius 5px 
        border 1px solid $color-divide-line
        .logo 
          width 250px 
          height 80px 
          position absolute 
          top -120px 
          left 50% 
          transform translateX(-50%)
          img 
            width 100%
        .form-group 
          .form-title 
            font-size 24px 
            font-weight 700
            text-align center
            line-height 80px
        .get-code 
          margin-left 10px 
        .icon-visible 
          margin-left 10px
        .btns 
          margin-top 50px
  @media screen and (max-width 750px) 
    .signup-phone
      box-sizing border-box 
    .signup-phone >>>.form 
      margin-top 20px
    .signup-phone >>>.submit
      margin-top 20px
    .signup-phone >>> .hint
      height 0 !important
    .form-group 
      .form-title 
        line-height 48px 
        text-align center
    .get-password 
      display inline-block
      position absolute 
      right 11px
    .hint-content 
      color $color-theme-red 
    .get-code 
      margin-left 10px 
    .icon-visible 
      margin-left 10px
       

</style>